<template>
  <div>
    <el-form label-width="100px">
      <el-row type="flex" justify="evenly">
        <el-form-item label="一体杆名称">
          <el-input placeholder="请输入一体杆名称" />
        </el-form-item>

        <el-form-item label="一体杆编号">
          <el-input placeholder="请输入一体杆编号" />
        </el-form-item>

        <el-form-item label="运行状态">
          <el-select placeholder="请选择运行状态">
            <el-option label="全部" :value="1" />
            <el-option label="正常" :value="2" />
            <el-option label="异常" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-row>
      <el-row style="padding-left: 30px;">
        <el-button type="primary" @click="onSub('add')">添加一体杆</el-button>
        <el-button type="primary">批量删除</el-button>
      </el-row>
    </el-form>

    <el-table
      v-loading="loading"
      style="width: 100%"
      :data="data"
      @row-click="onBack"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="序号"
        type="index"
        width="180"
      >
        <template #default="{$index}">
          {{ $index +1+ 10 *(page -1) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="poleName"
        label="一体杆名称"
        width="180"
      />
      <el-table-column
        prop="poleNumber"
        label="一体杆编号"
      />
      <el-table-column
        prop="poleIp"
        label="一体杆IP"
      />
      <el-table-column
        prop="areaName"
        label="安装区域"
      />
      <el-table-column
        prop="poleType"
        label="一体杆类型"
      />
      <el-table-column
        prop="poleStatus"
        label="	运行状态"
      />
      <el-table-column
        prop="demoFlag"
        label="操作"
      >
        <template #default="{row}">
          <el-button type="text" size="small" @click="onSub('edit' ,row.id)">编辑</el-button>
          <el-popconfirm
            title="是否确认删除当前一体杆？"
            @onConfirm="onDel(row.id)"
          >
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
          <!-- <el-button type="text" size="small" @click="onSub('del' ,row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="float:right">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20,50,100]"
        layout="total,prev,pager,next,sizes"
        :total="total"
        :page-size="10"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
    <el-dialog
      :title="formData.id ? '编辑一体杆' : '添加一体杆'"
      :visible="visible"
      width="500px"
      @close="visible=false"
    >
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="140px">
        <el-form-item label="一体杆名称" prop="poleName">
          <el-input v-model="formData.poleName" placeholder="请输入一体杆名称" />
        </el-form-item>

        <el-form-item label="一体杆编号" prop="poleNumber">
          <el-input v-model="formData.poleNumber" placeholder="请输入一体杆编号" />
        </el-form-item>

        <el-form-item label="一体杆IP" prop="poleIp">

          <el-input v-model="formData.poleIp" placeholder="请输入一体杆IP" /></el-form-item>

        <el-form-item label="关联区域" prop="areaId">
          <el-input v-model="formData.areaId" placeholder="请输入关联区域" />
        </el-form-item>
        <el-form-item label="一体杆类型" prop="poleType">
          <el-input v-model="formData.poleType" placeholder="请输入一体杆类型" />
        </el-form-item>

        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button @click="visible=false">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
          </el-form-item>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addIeceAPI, delIeceAPI, editIeceAPI, getIeceAPI } from '@/api/ieceSwing'

export default {
  data() {
    return {
      data: [],
      page: 1,
      pageSize: 10,
      total: 0,
      visible: false,
      loading: false,
      formData: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      rules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请选择关联区域', trigger: 'blur' }
        ],
        poleType: [{ required: true, message: '请输入一体杆类型', trigger: 'blur' }]
      }

    }
  },

  created() {
    this.onLoad()
  },
  methods: {
    onSub(type, id) {
      if (type === 'add') {
        // console.log(id)
        // TODO 做新增
        this.visible = true
      }
      if (type === 'edit') {
        this.visible = true
        // TODO 做编辑
        // 提前写入formData.id 防止闪烁
        this.$refs.formRef.formData.id = id
      }
      if (type === 'del') {
        // TODO 做删除
        // this.$refs.formRef.onDel(id)
      }
    },
    onBack(row) {
      this.formData = {
        poleName: row.poleName,
        poleNumber: row.poleNumber,
        poleIp: row.poleIp,
        areaId: row.areaId,
        poleType: row.poleType,
        id: row.id
      }
    },
    async onDel(id) {
      await delIeceAPI(id)
      this.$message.success('删除成功')
      if (this.data.list === 1) {
        this.page--
      }
      this.onLoad()
    },
    async  onSubmit() {
      await this.$refs.formRef.validate()
      // TODO发请求新增
      // 调接口
      if (!this.formData.id) {
        await addIeceAPI(this.formData)
      } else {
        await editIeceAPI(this.formData)
        console.log(this.formData.id)
      }

      this.$message.success(!this.formData.id ? '添加成功' : '编辑成功')
      this.visible = false
      this.onLoad()
    },
    async  onLoad() {
      const res = await getIeceAPI({ page: this.page, pageSize: this.pageSize })
      this.data = res.data.rows
      this.total = res.data.total
    },
    onCurrentChange(page) {
      this.page = page
      this.onLoad()
    },
    onSizeChange(page) {
      this.pageSize = page
      this.onLoad()
      this.page = 1
    }
  }
}
</script>

  <style>

  </style>
